<div class="form-horizontal">
  <div style="margin-bottom: 20px;">
    This visualization constructs funnel chart. Please notice that value column only accept number for values.
  </div>
  <div class="form-group">
    <label class="col-lg-6">Step Column Name</label>
    <div class="col-lg-6">
      <select ng-options="name for name in queryResult.getColumnNames()" ng-model="visualization.options.stepCol.colName" class="form-control"></select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-6">Step Column Dispaly Name</label>
    <div class="col-lg-6">
      <input type="text" ng-model="visualization.options.stepCol.displayAs" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-6">Funnel Value Column Name</label>
    <div class="col-lg-6">
      <select ng-options="name for name in queryResult.getColumnNames()" ng-model="visualization.options.valueCol.colName" class="form-control"></select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-6">Funnel Value Column Dispaly Name</label>
    <div class="col-lg-6">
      <input type="text" ng-model="visualization.options.valueCol.displayAs" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-6">Auto Sort Record By Value</label>
    <div class="col-lg-6">
      <input type="checkbox" ng-model="visualization.options.autoSort">
    </div>
  </div>
  <div ng-show="!visualization.options.autoSort">
    <div class="form-group">
      <label class="col-lg-6">Funnel Value Columns Name</label>
      <div class="col-lg-6">
        <select ng-options="name for name in queryResult.getColumnNames()" ng-model="visualization.options.sortKeyCol.colName" class="form-control"></select>
      </div>
    </div>
  </div>
</div>
